<template>
  <view class="container">
    <!-- 加油站图片 -->
    <image 
      class="station-img" 
      src="/static/oil/竹莲加油站.png" 
      mode="aspectFill"
    />
    
    <!-- 加油站信息区域 -->
    <view class="info-section">
      <view class="info-content">
        <view class="title">
          {{station.title}}
        </view>
        
        <view class="info-item">
          <text class="label">营业时间：</text>
          <text class="value">周一至周五 早上8:00-晚上22:00</text>
        </view>
        
        <view class="info-item">
          <text class="label">位置：</text>
          <text class="value">{{station.address}}</text>
		  <image src="/static/oil/navigationImage.png"  class="location-icon" @click="openNavigation"></image>
        </view>
      </view>
      
      <!-- 电话按钮 -->
      <view class="phone-btn" @tap="makePhoneCall">
        <image src="/static/oil/电话.png" mode="aspectFit" class="phone-icon"></image>
      </view>
    </view>
	
	
	<view class="pricetitle">油价详情</view>
	<view class="price-list">
	    <view class="price-item" v-for="(item, index) in priceList" :key="index">
	        <text class="gas-type">{{ item.type }}</text>
	        <text class="price">¥{{ item.price }}/L</text>
	    </view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  priceList: [
	    { type: '92#', price: '5.86' },
	    { type: '95#', price: '5.86' },
	    { type: '98#', price: '5.86' },
	    { type: '0#', price: '5.86' }
	  ],
	  station:{
		  // title:"",
		  // address:"",
		  // tel:""
	  }
    }
  },
  methods: {
    makePhoneCall() {
	  if(this.station.tel==""||this.station.tel==null){
		  uni.showToast({
		  	icon:"error",
			title:"商家号码为空号",
			image:"/static/oil/警告.png"
		  })
		  console.log("商家号码为空号")
	  }else{
		uni.makePhoneCall({
		    phoneNumber: this.station.tel,
			success() {
				console.log("拨打成功");
			},
			fail() {
				console.log("拨打失败");
			}	
		})
	  }   
    },
	// // 跳转到导航页
	// toRefueNavigation(){
	// 	uni.navigateTo({
	// 		url:"/pages/nearRefuel/refuelNavigation/refuelNavigation"
	// 	})
	// }
	// 打开导航
	openNavigation() {
	  uni.openLocation({
	    latitude: this.station.location.lat,
	    longitude:  this.station.location.lng,
	    name:  this.station.title,
	    address:  this.station.address,
	    scale: 18
	  });
	}
  },
 onLoad(){
// 接受数据
// 第一种
 //  	uni.$once("station",res=>{
	// 	this.station=res
	// })
// 第二种	
	this.station=uni.getStorageSync("station")
  }
}
</script>

<style lang="scss">
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
  }


.station-img {
  width: 100%;
  height: 400rpx;
}

.info-section {
  background: #fff;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  
  .info-content {
    flex: 1;
    margin-right: 30rpx;
    
    .title {
      font-size: 28rpx;
      font-weight: 700;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .info-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 16rpx;
      font-size: 24rpx;
      line-height: 1.5;
      
      .label {
        color: #666;
        min-width: 100rpx;
      }
      
      .value {
        color: #333;
        flex: 1;
      }
      
      .location-icon {
        width: 40rpx;
        height: 40rpx;
       
      }
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  .phone-btn {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    .phone-icon {
      width: 100rpx;
      height: 100rpx;
    }
  }
}
  .pricetitle {
    font-size: 32rpx;
    color: #333;
    font-weight: 700;
    margin-bottom: 20rpx;
	padding-left: 24rpx;
  }
  
 .price-list{
    .price-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0; 
      .gas-type {
        font-size: 28rpx;
        color: #333;
		margin-left: 120rpx;
      }
      
      .price {
        font-size: 28rpx;
        color: #ff6b00;
		margin-right: 120rpx;
      }
    }
  }

</style>